<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=G3KsOmqT7ruGRgxmU9dtpb4r8kjSlMiy"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
		<style type="text/css">
			html {
				height: 100%
			}
			
			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}
			
			#container {
				height: 100%
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var map = new BMap.Map("container");
			var point = new BMap.Point(116.404, 39.915);
			map.centerAndZoom(point, 5);
			map.enableScrollWheelZoom(true);
			var markers = [];

			function addToMarkers(marker) {
				markers.push(marker);
				//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
				var markerClusterer = new BMapLib.MarkerClusterer(map, {
					markers: markers
				});
			};
			/**
			 * 定位方法代码示例
			 * 1.浏览器定位	   Geolocation	优先调用浏览器H5定位接口，如果失败会调用IP定位
			 */

			var geolocation = new BMap.Geolocation();
			var myGeo = new BMap.Geocoder();
			//			geolocation.getCurrentPosition(function(r) {
			//				if(this.getStatus() == BMAP_STATUS_SUCCESS) {
			//					var mk = new BMap.Marker(r.point);
			//					map.addOverlay(mk);
			//					map.panTo(r.point);
			//					mk.addEventListener("click", function(e) {
			//						var pt = r.point;
			//						myGeo.getLocation(pt, function(rs) {
			//							alert(rs.address);
			//							var addComp = rs.addressComponents;
			//							alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
			//						});
			//					});
			//				} else {
			//					alert('failed' + this.getStatus());
			//				}
			//			});

			/**
			 * 2.IP定位	LocalCity	根据用户IP 返回城市级别的定位结果
			 */
			function myFun(result) {
				var cityName = result.name;
				map.setCenter(cityName);
				alert("当前定位城市:" + cityName);
				map.addControl(new BMap.MapTypeControl());
				map.setCurrentCity(cityName); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
			}
			var myCity = new BMap.LocalCity();
			myCity.get(myFun);

			/**
			 * 3.定位SDK辅助定位	Geolocation
			 * 当您的APP中有内置的Web页面，同时在Web页面需要提供您的当前位置信息时，可调用集成在App中的百度地图定位SDK来获取更精准的位置信息
			 */

			// 开启SDK辅助定位---与H5定位唯一的区别
			geolocation.enableSDKLocation();
			geolocation.getCurrentPosition(function(r) {
				if(this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMap.Marker(r.point);
					addToMarkers(mk);
					map.addOverlay(mk);
					map.panTo(r.point);
					mk.addEventListener("click", function(e) {
						var pt = r.point;
						myGeo.getLocation(pt, function(rs) {
							alert(rs.address);
							var addComp = rs.addressComponents;
							alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
						});
					});
				} else {
					alert('failed' + this.getStatus());
				}
			});

			//单击获取点击的经纬度
			map.addEventListener("click", function(e) {
				var newPoint = new BMap.Point(e.point.lng, e.point.lat);
				var marker = new BMap.Marker(newPoint); // 创建标注 
				addToMarkers(marker);
				map.addOverlay(marker);
				var mymyGeo = new BMap.Geocoder();
				mymyGeo.getLocation(newPoint, function(rs) {
					var addComp = rs.addressComponents;
					var address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
					var opts = {
						width: 120, // 信息窗口宽度    
						height: 60, // 信息窗口高度    
						title: address // 信息窗口标题   
					}
					var infoWindow = new BMap.InfoWindow(e.point.lng + "," + e.point.lat, opts); // 创建信息窗口对象    
					map.openInfoWindow(infoWindow, newPoint); // 打开信息窗口
				});

			});
		</script>
	</body>

</html>